import React from 'react';
import styles from './index.less';
import { Tabs } from 'antd';
import commonPkg from '@/utils/commonPkg';
const { images } = commonPkg;
const { TabPane } = Tabs;
import { history } from 'umi';

var attr = [
  {
    title: '首页',
    path: '/home',
  },
  {
    title: '解决方案',
    path: '/solution',
  },
  {
    title: '服务与支持',
    path: '/serviceAndSupport',
  },
  {
    title: '蜂启录',
    path: '/journal',
  },
  {
    title: '成功案例',
    path: '/successpage',
  },
  {
    title: '关于我们',
    path: '/forUs',
  },
  {
    title: '加入我们',
    path: '/joinUs',
  },
];

export default class extends React.Component {
  state = {
    active: '0',
  };
  componentDidMount = () => {
    let ind = attr.findIndex(val => {
      return location.pathname.indexOf(val.path) != -1;
    });
    if (ind < 0) ind = 0;

    this.setState({
      active: String(ind),
    });
  };
  render() {
    const { active } = this.state;
    return (
      <div className={styles.cont}>
        <div className={styles.container}>
          <div className={styles.left}>
            <img src={images.logo} style={{ height: '22px' }} />
          </div>
          <div className={styles.right}>
            <Tabs
              activeKey={active}
              onChange={(key, aaa) => {
                console.log();
                this.setState({
                  active: String(key),
                });
                history.push({ pathname: attr[key].path });
              }}
            >
              {attr.map((item, i) => {
                return <TabPane tab={item.title} key={i}></TabPane>;
              })}
            </Tabs>
          </div>
        </div>
      </div>
    );
  }
}
